<template>
	<hyb-page title="商家入驻">
		<template v-slot:body>
			<form @submit="submit">
				<view class="gui-bg-white gui-dark-bg-level-3 ">

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">门店名称</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.s_name" placeholder="请输入内容" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">姓名</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.s_u_name" placeholder="请输入内容" />
						</view>
					</view>


					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">手机号</text>
						<view class="gui-form-body">
							<!-- <hyb-phone v-model="formData.y_telphone"></hyb-phone> -->
							<input type="text" class="gui-form-input" v-model="formData.s_telphone"
								placeholder="请输入电话号码" />
						</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">门店介绍</text>
						<view class="gui-form-body">

							<textarea v-model="formData.s_content" placeholder="请输入门店介绍"
								class="gui-textarea"></textarea>

						</view>
					</view>

				</view>
				<view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">


					<view class="gui-form-item gui-border-b gui-padding" v-if="rz_type != 1">
						<text class="gui-form-label gui-secondary-text">经营服务类别</text>
						<view class="gui-form-body">
							<hyb-jineng type="text" class="gui-form-input gui-flex1" disabled v-model="formData.s_type"
								placeholder="请选择类别"></hyb-jineng>

						</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding" v-if="rz_type != 2">
						<text class="gui-form-label gui-secondary-text">经营商品类别</text>
						<view class="gui-form-body">
							<hyb-goods-category type="text" class="gui-form-input gui-flex1" disabled v-model="formData.g_type"
								placeholder="请选择商品分类"></hyb-goods-category>

						</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">门店地址</text>
						<view class="gui-form-body">
							<hyb-city :tag="1" v-model="formData.s_address"></hyb-city>
						</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">详细地址</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.s_xxaddress"
								placeholder="请输入内容" />
						</view>
					</view>











					<!-- 	<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">添加标签</text>
						<view class="gui-form-body gui-flex">
							<input type="text" class="gui-form-input gui-flex1" v-model="formData.y_label"
								name="y_telphone" placeholder="请输入标签" />
						</view>
					</view> -->


					<!-- 	<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">入驻时长</text>
						<view class="gui-form-body gui-flex">
							<picker mode="selector" :range="ruzhu" @change="ruzhuChange" class="gui-flex1">
								<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
									<text class="gui-text gui-secondary-text">{{ruzhu[ruzhu_index]}}</text>
									<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
								</view>
							</picker>
						</view>
					</view> -->

				</view>
				<view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">门店logo</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="s_thumb" v-model="formData.s_thumb"></hyb-upload>
						</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">营业执照</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="s_zhizhao" v-model="formData.s_zhizhao"></hyb-upload>
						</view>
					</view>
					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-form-label gui-secondary-text">门店幻灯片</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row">
							<hyb-upload :maxFileNumber="9" ref="s_imgpath" v-model="formData.s_imgpath"></hyb-upload>
						</view>
					</view>

				</view>
				<view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">


					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-form-label gui-secondary-text">身份证照片 ( 个人信息面 )</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload :bigBg="idCard1" ref="sfz_imgz" v-model="formData.sfz_imgz"></hyb-upload>
						</view>
					</view>


					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-form-label gui-secondary-text">身份证照片 ( 国徽图案面 )</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload :bigBg="idCard2" ref="sfz_imgf" v-model="formData.sfz_imgf"></hyb-upload>
						</view>
					</view>

				</view>

				<view class="gui-form-item gui-border-b gui-padding" >
					<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
						<gui-radio :checked="checked" @change="radioChange">
							<view class="gui-flex gui-row">
								<text class="gui-text gui-primary-text">我同意并遵守</text>
								<text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage">《入驻协议》</text>
							</view>
						</gui-radio>
					</view>
				</view>


				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top" >
					<button type="default" class="gui-button gui-bg-primary gui-noborder" @tap="confirm"
						style="border-radius:50rpx;">
						<text class="gui-color-white gui-button-text">提交</text>
					</button>
				</view>

			</form>
			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="formData.y_city">
			</gui-area-picker>



			<hyb-privacy ref="guimodal" :content="base.shangjia_xieyi" v-model="checked"></hyb-privacy>

		</template>
	</hyb-page>

</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import parserHtml from "@/Grace6/js/parserHTML.js";
	export default {
		data() {
			return {
				idCard1: 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/e53bf48607dcf795ab78e419dc5cf432.png',
				idCard2: 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/dac9c5c703b2a0bcd254a919d0da5632.png',
				formData: {
					s_name: "",
					s_status: "待审核",
					g_type: []
				},
				checked: false,
				sets: [],
				ruzhu: [],
				ruzhu_index: 0,
				rz_type: 0, // 新增字段，记录入驻类型
				rule: [{
						name: "s_name",
						checkType: "string",
						checkRule: "2,10",
						errorMsg: "门店名称最少2个字"
					},
					{
						name: "s_u_name",
						checkType: "string",
						checkRule: "2,10",
						errorMsg: "姓名最少2个字"
					},

					{
						name: "s_telphone",
						checkType: "phone",
						checkRule: "",
						errorMsg: "请输入正确手机号！"
					},

					{
						name: "s_content",
						checkType: "string",
						checkRule: "1,1024",
						errorMsg: "门店介绍不能为空！"
					},

					{
						name: "s_type",
						checkType: "string",
						checkRule: "1,1024",
						errorMsg: "所属类别不能为空！"
					},

					{
						name: "g_type",
						checkType: "array",
						checkRule: "1,1024",
						errorMsg: "商品分类不能为空！"
					},

					{
						name: "s_address",
						checkType: "string",
						checkRule: "2,256",
						errorMsg: "请选择门店地址！"
					},

					{
						name: "s_xxaddress",
						checkType: "string",
						checkRule: "2,256",
						errorMsg: "请输入详细地址！"
					},

					{
						name: "s_thumb",
						checkType: "string",
						checkRule: "1,256",
						errorMsg: "请上传门店logo！"
					},

					{
						name: "s_zhizhao",
						checkType: "string",
						checkRule: "1,256",
						errorMsg: "请上传营业执照！"
					},


					{
						name: "s_imgpath",
						checkType: "string",
						checkRule: "2,256",
						errorMsg: "请上传至少一张幻灯片！"
					},

					{
						name: "sfz_imgz",
						checkType: "string",
						checkRule: "1,256",
						errorMsg: "请上传身份证正面！"
					},
					{
						name: "sfz_imgf",
						checkType: "string",
						checkRule: "1,256",
						errorMsg: "请上传身份证反面！"
					},

				]
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base");
			}
		},

		onLoad(options) {
			if (options && options.rz_type) {
				this.rz_type = Number(options.rz_type);
			}

			uni.gPost("shangjia/info").then((info) => {
				if (info) {
					if (info.s_status == "审核通过") {
						this.formData = info;
						// 处理商品分类字段，确保是数组格式
						if (info.g_type && typeof info.g_type === 'string') {
							this.formData.g_type = info.g_type.split(',').map(id => parseInt(id));
						} else if (!info.g_type) {
							this.formData.g_type = [];
						}
					} else {
						this.formData.s_id = info.s_id;
						// 处理商品分类字段，确保是数组格式
						if (info.g_type && typeof info.g_type === 'string') {
							this.formData.g_type = info.g_type.split(',').map(id => parseInt(id));
						} else if (!info.g_type) {
							this.formData.g_type = [];
						}
					}
				}
			})

			// uni.gPost("jishi/sets").then((list) => {
			// 	this.sets = list;
			// 	list.forEach((item) => {
			// 		this.ruzhu.push(item.r_time + "天/(￥" + item.r_money + ")");
			// 	})
			// 	this.formData.y_endtime = this.sets[this.ruzhu_index].r_time;
			// })
		},
		methods: {

			agree(val) {
				this.checked = val;
				this.$refs.guimodal.close();
			},
			radioChange(e) {
				this.checked = e[0];
				console.log(this.checked)
			},

			sexChange(sex) {
				this.formData.y_sex = sex;
			},

			openXYPage: function() {
				this.$refs.guimodal.open();

			},

			ruzhuChange(e) {
				this.ruzhu_index = e.detail.value;
				this.formData.y_endtime = this.sets[this.ruzhu_index].r_time;
				console.log(this.formData.y_endtime)
			},
			async confirm() {


				let that = this;
				uni.showLoading({
					title: "提交中..."
				})
				let location = await uni.location.getLocation();
				await that.$refs.s_thumb.uploadAsync();
				await that.$refs.s_zhizhao.uploadAsync();
				await that.$refs.s_imgpath.uploadAsync();
				await that.$refs.sfz_imgz.uploadAsync();
				await that.$refs.sfz_imgf.uploadAsync();
				console.log(that.formData)
				let checkRes = graceChecker.check(that.formData, that.rule);
				if (checkRes) {
					if (!this.checked) {
						uni.showToast({
							title: "请同意协议!",
							icon: "error"
						})
						return;
					}
					this.formData.latitude = location.latitude;
					this.formData.longitude = location.longitude;
					
					// 处理商品分类字段，转换为字符串格式
					if (this.formData.g_type && Array.isArray(this.formData.g_type)) {
						this.formData.g_type = this.formData.g_type.join(',');
					}
					
					uni.gPost("shangjia/ruzhu", that.formData).then((res) => {
						uni.hideLoading();
						uni.showToast({
							title: "提交成功",
							success: () => {
								uni.navigateTo({
									url: this.$store.state.base.hyzx_luj
								})
							}
						});
					})
				} else {
					uni.hideLoading();
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}



			},
		}
	}
</script>

<style>
	.gui-form-label {
		width: 160rpx;
	}

	.modal-btns {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
		width: 320rpx;
	}
</style>
